<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_固定定位全屏遮罩</title>
    <style>
        .mask {
            background-color: rgba(0, 0, 0, .4);
            /*使用固定定位，以HTML为参照物，紧贴四个边，就能实现撑满全屏的效果*/
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;

        }
    </style>
</head>
<body>
<div class="mask"></div>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque beatae consequuntur dolore harum, in iure
        laborum maiores modi molestiae mollitia necessitatibus nemo omnis quo, rem repellat similique veniam!
        Consequuntur, voluptates.
    </div>
    <div>Assumenda beatae dolores, exercitationem perferendis sunt veritatis voluptatibus. Accusantium animi delectus
        doloremque, optio repudiandae veniam? Architecto consectetur corporis culpa ducimus inventore ipsam magni maxime
        molestiae nisi obcaecati, pariatur, perspiciatis, repellendus.
    </div>
    <div>A ab aliquam animi atque autem consequatur cumque deserunt distinctio, error eveniet ex excepturi explicabo
        iusto laboriosam mollitia non placeat praesentium quas quo recusandae rerum tenetur unde veniam. Earum, nobis?
    </div>
    <div>Consequuntur, dolor eaque earum eius esse exercitationem in nisi obcaecati quisquam repellat voluptas
        voluptatibus. Distinctio ex illum laudantium magnam odit officia, pariatur possimus, quam reiciendis suscipit
        unde voluptate voluptates voluptatibus!
    </div>
    <div>Assumenda doloribus ducimus et impedit iure laborum libero maxime, optio perferendis placeat porro quasi quidem
        quo rerum similique vel veniam? Aperiam aspernatur eveniet labore modi nemo sed sequi sunt, voluptatum!
    </div>
    <div>A accusamus aliquam aut consequatur corporis cupiditate deleniti doloremque exercitationem expedita illo iusto
        magnam, mollitia nobis officiis quae quasi qui quia quisquam similique, sint, temporibus veniam vero. Excepturi
        rem, repudiandae!
    </div>
    <div>Commodi distinctio earum soluta ut. A impedit repudiandae ut voluptatem? Beatae cupiditate doloremque dolores
        excepturi exercitationem in labore minus modi, odit quia reiciendis rerum, sapiente, tempore tenetur voluptas
        voluptatem voluptatum!
    </div>
    <div>Atque delectus dolor doloribus eaque explicabo fugit, incidunt ipsa iure maiores, necessitatibus nobis quam,
        quidem quod quos saepe similique sunt tenetur! A ad dicta id labore molestias omnis tenetur ut.
    </div>
    <div>Alias corporis doloremque, ipsum modi mollitia neque porro quas saepe sapiente voluptatibus! Ab amet
        consectetur corporis eos error facilis, illo illum ipsa labore, laboriosam libero qui, quisquam quo rem sint.
    </div>
    <div>Excepturi explicabo hic nam neque. Aliquam aspernatur assumenda aut, beatae, blanditiis consectetur delectus
        ducimus ea est eum iste magni maiores maxime nisi omnis, perferendis quas quos tempora unde voluptatem
        voluptatum.
    </div>
    <div>A ad consequatur consequuntur debitis dolor excepturi, incidunt laboriosam maiores minima minus nam
        necessitatibus, nesciunt nisi optio porro quae quibusdam quidem quisquam repellendus reprehenderit sapiente
        similique velit! Ab fugiat, non.
    </div>
    <div>Adipisci amet blanditiis deleniti, deserunt ea, eaque enim facere ipsum libero magnam numquam odio, possimus
        praesentium quidem repellendus rerum sed? Cum dicta labore laborum quia quos repellendus saepe veritatis
        voluptatibus!
    </div>
    <div>Corporis dicta distinctio dolores eos explicabo fuga incidunt, maxime molestias nemo nisi, non omnis
        perspiciatis quas quia quod sunt unde velit. Corporis earum eveniet maiores reprehenderit sequi sit velit vitae.
    </div>
    <div>Accusamus alias, aspernatur autem dicta eaque itaque magni mollitia, nemo nulla praesentium, quia ratione unde?
        A consequatur exercitationem itaque labore laboriosam laudantium minima obcaecati reiciendis repellat vero!
        Eligendi, possimus velit.
    </div>
    <div>Ab doloremque est exercitationem illum labore magni nostrum quod ratione rem reprehenderit! Doloremque, earum,
        unde. Blanditiis eaque eius maiores, numquam placeat quas quia quo repellendus, repudiandae sint ut voluptate
        voluptatibus!
    </div>
    <div>Blanditiis dolorum eligendi fugiat, iure omnis perferendis porro possimus quis reiciendis sunt. Blanditiis
        culpa delectus dolor eos error expedita harum illo illum inventore, minus nisi pariatur, rem repudiandae veniam
        voluptate?
    </div>
    <div>Assumenda atque explicabo magnam maiores voluptates? Error, eveniet facilis harum laudantium odio placeat! Ab
        accusamus at delectus doloremque ea est ipsa iure, iusto molestiae nihil numquam, quae soluta veniam,
        voluptatum.
    </div>
    <div>Adipisci aut consequatur delectus dolores iusto maiores necessitatibus nobis quod quos similique! Aliquam
        blanditiis dignissimos eaque error esse fugit officiis perspiciatis qui voluptatibus. Ab aperiam cupiditate
        dicta eos omnis totam.
    </div>
    <div>Corporis enim eos esse est et eum impedit inventore qui quo tempore! Dicta error exercitationem id in labore
        nobis omnis perferendis sequi. Debitis deleniti doloremque illum ipsum mollitia reiciendis rem.
    </div>
    <div>Blanditiis earum ipsa molestias nihil quas! Alias dolor esse illum in laborum quidem tempore? Deleniti deserunt
        dolorum esse expedita explicabo facilis incidunt nemo, porro quam quas quibusdam quos ratione repellat.
    </div>
    <div>Aliquam autem enim eveniet in inventore maiores nesciunt odio praesentium quibusdam, quo, reiciendis sit
        tempora tenetur ullam vel. Blanditiis doloribus est ex rem! Debitis fuga illo iure quasi similique velit.
    </div>
    <div>Alias maxime natus nemo nesciunt tempore. Assumenda aut ducimus eius in maxime mollitia natus numquam pariatur
        perferendis placeat qui quidem quo, ratione soluta temporibus unde voluptate voluptatum. Fugiat, quam vel.
    </div>
    <div>Accusamus aliquid amet animi beatae commodi consequuntur delectus dignissimos facilis id iure labore mollitia
        nam nobis, optio, placeat possimus quasi qui quia ratione repellat repellendus similique tenetur vero voluptate
        voluptatibus.
    </div>
    <div>Adipisci animi aspernatur cupiditate dolorum ducimus ea eius enim, fugiat non quae quam rem, suscipit velit! Ab
        adipisci blanditiis corporis dolorem expedita maxime quas quasi quo, quos rem? Quibusdam, rerum.
    </div>
    <div>Adipisci culpa dolor dolorem earum est expedita itaque minima nobis optio perferendis, placeat quam rerum
        tempora, tempore vitae? Aperiam beatae deserunt, id inventore itaque laboriosam quos vel. Fugit ipsam, minus!
    </div>
    <div>Aperiam consequuntur debitis ea id odio provident qui veniam! Architecto at distinctio dolore esse eveniet
        fugiat illo, impedit, incidunt ipsa iste iusto labore laboriosam minus molestiae obcaecati optio possimus ut?
    </div>
    <div>Aliquid amet animi dignissimos eaque est facere incidunt nemo non, pariatur quibusdam sapiente, sed vitae
        voluptatem! Debitis, ea in? Atque consequatur corporis culpa doloribus facere, fuga nisi porro quas qui?
    </div>
    <div>Assumenda atque aut deserunt est, eveniet excepturi iste iure magni nesciunt omnis quas qui! Est ex expedita
        hic omnis repellendus sapiente ut? Aspernatur cumque ea impedit minima nostrum officia, quia!
    </div>
    <div>Aperiam autem harum illum mollitia nemo officia pariatur vero voluptas. Accusamus accusantium asperiores cumque
        cupiditate deserunt eaque enim eos explicabo fuga nemo nostrum numquam odit pariatur, perspiciatis quos saepe
        sint.
    </div>
    <div>Aperiam consequatur dignissimos eaque enim nesciunt officia quaerat quisquam quos sit soluta! Accusantium
        aliquam deleniti dolorem eum excepturi impedit iure, minus necessitatibus quae quos repellat, saepe sapiente sed
        ullam voluptate.
    </div>
    <div>Consequatur ea molestias nisi pariatur ullam. Aliquid aperiam assumenda atque culpa cupiditate deserunt
        distinctio ea eos est facere impedit ipsum iusto laborum perferendis porro, quae repellat sapiente soluta totam
        voluptas.
    </div>
    <div>Ab cumque doloremque explicabo obcaecati ratione, recusandae similique voluptatibus voluptatum! Ab alias
        asperiores deleniti facere, facilis illo illum incidunt ipsum nam, nesciunt non nostrum, perspiciatis saepe sit
        unde vero voluptatibus?
    </div>
    <div>Beatae blanditiis cumque debitis ea incidunt labore laboriosam maxime necessitatibus omnis porro, possimus,
        quae similique, veniam? Ab consequuntur earum quasi sed. Architecto asperiores, assumenda aut eius hic iusto
        nesciunt sit!
    </div>
    <div>Ad amet dolor exercitationem explicabo nam neque provident ut? Accusamus aliquid cum cumque dolore, dolorum et
        exercitationem ipsum perspiciatis repellendus sed sequi soluta. Cupiditate error eveniet ipsam ipsum officia
        tempora!
    </div>
    <div>Animi autem cum dolor eius et exercitationem explicabo harum illum iure laudantium natus, nemo nesciunt officia
        placeat porro quaerat sapiente sint veritatis. Ab aliquid assumenda atque est eum id nesciunt?
    </div>
    <div>At autem dignissimos doloribus error expedita hic impedit inventore mollitia nam natus nemo non numquam porro
        provident, qui quibusdam quo quod ratione sint sit soluta temporibus veritatis voluptate voluptatem,
        voluptatibus!
    </div>
    <div>Animi blanditiis esse et ipsa odit officiis placeat qui recusandae tempora velit! Ea eum itaque nihil optio
        temporibus. Blanditiis, consequatur itaque iure labore odio qui quis quisquam sed soluta suscipit.
    </div>
    <div>A ad aliquam atque, consequuntur cum cumque cupiditate deserunt eaque est facere hic, id in ipsam itaque
        laborum modi nam, natus nemo porro provident quasi ratione reprehenderit tempora. Nemo, veniam.
    </div>
    <div>Maxime officiis quidem tempore veritatis. Animi blanditiis commodi culpa debitis deserunt dignissimos eos fugit
        illo itaque maiores minus, necessitatibus perspiciatis quo quod quos, ratione suscipit tenetur totam ut,
        veritatis voluptas.
    </div>
    <div>Amet dicta error facilis magnam mollitia nesciunt nulla praesentium quidem quisquam temporibus! Adipisci
        assumenda blanditiis fuga, ipsam iure modi omnis voluptas voluptate. Cupiditate in laboriosam numquam optio
        quisquam sed ut!
    </div>
    <div>Aliquid, animi aspernatur exercitationem explicabo ipsum labore mollitia neque odit omnis perferendis quis
        tempora tempore ullam! Ad amet incidunt ipsa mollitia possimus quae quam, quos reprehenderit. Ducimus fugiat
        harum totam!
    </div>
    <div>Accusantium ad aperiam asperiores atque aut deserunt facere illum incidunt ipsa ipsum maxime neque obcaecati
        porro repudiandae rerum, suscipit ullam unde veniam vero voluptatem! Amet aut inventore minus obcaecati tempore.
    </div>
    <div>Ab accusamus aliquid asperiores cumque deserunt, dolorem doloremque eaque esse, est eum illo illum itaque
        labore nihil nisi odio perferendis provident qui recusandae rem, sapiente tempora unde veniam? Aliquid, vero.
    </div>
    <div>At deserunt dolores, eum explicabo facere harum ipsum iure laboriosam minima minus nesciunt, nisi numquam porro
        quaerat quisquam, sapiente similique sunt suscipit ullam voluptas. Aliquam eligendi porro quam qui reiciendis!
    </div>
    <div>Ab adipisci architecto assumenda blanditiis commodi corporis delectus dolor doloribus, eaque error eveniet
        expedita explicabo facilis fuga impedit ipsam iure iusto mollitia nihil nostrum perferendis perspiciatis
        provident quia rerum sunt?
    </div>
    <div>Alias, aliquid doloribus libero omnis possimus quibusdam repellat, reprehenderit saepe sequi, voluptas
        voluptate voluptatem voluptatum. Harum ipsa ipsum nemo numquam omnis sunt, ut. Deserunt eaque exercitationem
        fuga necessitatibus unde voluptas.
    </div>
    <div>Aliquam consequatur dicta earum nobis perspiciatis. Dolor fugit maxime nobis quia quidem, quis quod. Accusamus
        consequuntur dignissimos eaque eos exercitationem ipsum laborum minus, nesciunt nostrum odio reprehenderit saepe
        tenetur vitae!
    </div>
    <div>A accusantium assumenda dignissimos, ea eius est ex impedit, iusto magni maiores molestias mollitia nam non
        quod repudiandae rerum similique totam ut? Corporis deserunt error libero molestias officiis sint voluptatem.
    </div>
    <div>Alias consequuntur corporis, cum distinctio dolorum harum ipsa nesciunt odit officiis quisquam? Adipisci
        asperiores aspernatur commodi consequatur cum dignissimos, eligendi eveniet illum laborum libero obcaecati
        officiis quibusdam reprehenderit sequi similique!
    </div>
    <div>Accusantium corporis dignissimos ea eius eligendi, enim error facilis, hic minima molestiae nemo nihil nostrum
        odio, perferendis quasi quibusdam sed vero voluptates. Eius facilis impedit natus repudiandae, tempora tenetur
        veritatis!
    </div>
    <div>Ad obcaecati quas reiciendis? Ad consequuntur culpa distinctio dolorem eius, eligendi error excepturi facilis
        hic id inventore itaque labore laborum natus optio perferendis quaerat repellendus saepe sapiente sunt
        voluptates voluptatibus!
    </div>
    <div>Accusantium culpa, hic impedit molestias nam neque nisi non quasi qui reprehenderit! Accusamus consectetur
        consequuntur debitis dolore dolorum inventore ipsam laboriosam magni pariatur perspiciatis quia quis quisquam
        vel, veritatis vero?
    </div>
    <div>Accusamus facere fuga hic ipsa magnam minima quae quo soluta. Ad eveniet numquam officiis omnis provident
        repellendus repudiandae tempore voluptatem voluptates voluptatum. Asperiores cum delectus est nemo omnis unde.
        Voluptatem.
    </div>
    <div>Autem doloremque esse inventore ipsum modi odio quam quos reprehenderit! Accusantium nemo, nesciunt. Blanditiis
        consequatur dignissimos dolor dolorem ea est facilis, fugit illum ipsa laborum, necessitatibus suscipit, tempora
        temporibus unde?
    </div>
    <div>Debitis earum eligendi et fugiat incidunt laudantium repudiandae tempora totam voluptas? Aspernatur atque,
        deserunt dolore doloremque dolores doloribus ea excepturi fugiat magnam natus odio quidem quisquam, repellat
        saepe, sunt voluptatem.
    </div>
    <div>A ab at consequatur corporis, culpa delectus dolor ea error est fugit harum illo iste maxime, neque non officia
        officiis perferendis quae quis quisquam quo recusandae similique tempore temporibus voluptatum.
    </div>
    <div>A accusamus asperiores commodi consectetur debitis dignissimos doloremque esse et illo incidunt ipsum modi
        molestiae nostrum nulla odit perferendis perspiciatis quasi, quia ratione recusandae sed sequi tenetur, totam
        veritatis voluptates!
    </div>
    <div>Ab blanditiis cumque dicta dolorem eos magni necessitatibus sed. Distinctio esse harum nulla quia voluptates.
        Excepturi facere, minus. Dicta est expedita id itaque laborum nulla officia perferendis provident repudiandae
        vel?
    </div>
    <div>Consectetur culpa deserunt ea earum eum, fugit illo illum incidunt inventore iusto magnam magni minus,
        molestiae nam nihil nisi perspiciatis praesentium quisquam, quos ratione recusandae reprehenderit similique
        tempore ullam ut!
    </div>
    <div>Consectetur facere iste placeat quas quidem recusandae saepe, tenetur vitae voluptate! Debitis distinctio
        dolorem eos eum eveniet illo iste nostrum numquam obcaecati placeat quaerat, quod repellat, suscipit, tempora
        temporibus vel.
    </div>
</div>

</body>
</html>